<template>

  <a-card :bordered="false" id="XiangmuzuItemList">
    <div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" @keyup.enter.native="searchQuery">
          <a-row>
            <a-col :md="8">
              <div>项目组</div>
            </a-col>
            <a-col :md="18" :sm="24">
              <div style="text-align: right" class="leftSearch">
                <a-input-search v-model="searchValue" @pressEnter="handlePressEnter" v-show="showSeachInput" placeholder="请输入项目名" style="width: calc(100% - 70px)">
                </a-input-search>
                  <a-icon  v-show="!showSeachInput" style="font-size:18px" type="search" @click="showSearch" />
              <a-icon style="margin-left:24px;font-size:18px" type="plus" @click="handleAdd"></a-icon>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <a-table
          ref="table"
          size="middle"
          rowKey="id"
          class="j-table-force-nowrap1"
          :scroll="{x:true}"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :expandedRowKeys="expandedRowKeys"
          @change="handleTableChange"
          @expand="handleExpand"
          v-bind="tableProps">

          <span slot="name" slot-scope="text, record">
            <div @click="dianji(record)" style="width: 100%;height: 100%;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" :title="record.projectName" class="item-text">
              {{record.projectName}}
            </div>
          </span>
          <a-dropdown placement="bottomCenter" slot="action" slot-scope="text, record">
            <a class="ant-dropdown-link">
              <a-icon type="setting"></a-icon>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handleAddChild(record)">添加下级</a>
              </a-menu-item>
              
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>


        </a-table>
      </div>
    </div>
    <dict-item-modal ref="modalForm" @ok="modalFormOk"></dict-item-modal> <!-- 字典数据 -->
  </a-card>
</template>

<script>
import pick from 'lodash.pick'
import { filterObj } from '@/utils/util'
import DictItemModal from './modules/DictItemModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {initDictOptions} from "@comp/dict/JDictSelectUtil";

export default {
  name: 'XiangmuzuItemList',
  mixins: [JeecgListMixin],
  components: { DictItemModal },
  data() {
    return {
      searchValue:'',
      showSeachInput:false,
      columns: [
        {
          title: '名称',
          align: 'left',
          dataIndex: 'projectName',
          scopedSlots: { customRender: 'name' }
        },
        {
          title:'保养设备名称',
          align:"left",
          dataIndex: 'projectDeviceName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      queryParam: {
        dictId: '',
        dictName: '',
        projectName: '',
        status: []
      },
      title: '操作',
      visible: false,
      screenWidth: 800,
      model: {},
      dictId: '',
      status: 1,
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      validatorRules: {
        projectName: { rules: [{ required: true, message: '请输入名称!' }] },
        itemValue: { rules: [{ required: true, message: '请输入数据值!' }] }
      },
      url: {
        list: "/modules/upkeepProjectGroup/rootList",
        childList: "/modules/upkeepProjectGroup/childList",
        getChildListBatch: "/modules/upkeepProjectGroup/getChildListBatch",
        delete: "/modules/upkeepProjectGroup/delete",
        deleteBatch: "/modules/upkeepProjectGroup/deleteBatch",
      },
    }
  },
  created() {
    this.dictId = '1790906718279217153'
    this.queryParam = {}
    this.form.resetFields()
    this.model = Object.assign({}, record)
    this.model.dictId = this.dictId
    this.model.status = this.status
    this.visible = true
    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.model, 'projectName', 'itemValue'))
    })
    // 当其它模块调用该模块时,调用此方法加载字典数据

    this.loadData()

  },
  methods: {

    handlePressEnter(e){
      if(this.searchValue==null||this.searchValue==""){
        this.superQueryParams=''
        this.loadData()
        this.showSeachInput=false
      }else{
        this.superQueryParams=JSON.stringify([{"rule":"like","type":"string","dictCode":"","extendOption":["Y","N"],"val":this.searchValue,"field":"projectName"}])
        this.loadData()
      }
    },
    showSearch(){
      this.showSeachInput=true
    },
    dianji(record){
      this.$emit('fenzuClick', record.projectName)
    },
    add(dictId) {
      this.dictId = dictId
      this.edit({})
    },
    edit(record) {
      // record.id=
      // if (record.id) {
      //   this.dictId = record.id
      // }
      this.dictId = '1790906718279217153'
      this.queryParam = {}
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.model.dictId = this.dictId
      this.model.status = this.status
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'projectName', 'itemValue'))
      })
      // 当其它模块调用该模块时,调用此方法加载字典数据
      this.loadData()
    },

    getQueryParams() {
      //update--begin--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
      this.ipagination.total = 0
      //update--end--autor:wangshuai-----date:20191204------for：清空总条数 teambition JT-113------
      var param = Object.assign({}, this.queryParam)
      param.dictId = this.dictId
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
        param['superQueryMatchType'] = this.superQueryMatchType
      }
      return filterObj(param)
    },

    // 添加字典数据
    handleAdd() {
      this.$refs.modalForm.add(this.dictId)
      this.$refs.modalForm.title = '新增保养项目组'
    },
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
    },
    //增加样式方法返回值
    getRowClassname(record) {
      if (record.status == 0) {
        return 'data-rule-invalid'
      }
    }
    //update--end--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
  }
}
</script>
<style lang="less" scoped>
//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
/deep/ .data-rule-invalid {
  background: #f4f4f4;
  color: #bababa;
}

/deep/ .ant-table thead {
  display: none;
}

#XiangmuzuItemList /deep/ .ant-table-tbody > tr > td {
  border-bottom: 0px solid #000;
}

//update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
.item-text:hover{
  cursor:pointer;
}
.table-page-search-wrapper{
  margin-bottom: 24px;
}
.table-page-search-wrapper /deep/ .ant-row{
  font-size: 18px;

}
/* 定义过渡样式 */
.toLeft-enter-active, .toLeft-leave-active {
  opacity: 1;
  border: 1px solid red;
  transition: all .3s;
  transform: translateX(0%);
}
.toLeft-enter, .toLeft-leave-to /* .fade-leave-active for <=2.1.8 */ {
  opacity: 0;
  border: 1px solid blue;
  transform: translateX(0%);
}
.toRight-enter-active, .toRight-leave-active {
  transition: opacity .3s;
}
.toRight-enter, .toRight-leave-to /* .fade-leave-active for <=2.1.8 */ {
  opacity: 0;

}
.leftSearch /deep/ .ant-input-search-icon{
  display: none;
}
.leftSearch /deep/ .ant-input-affix-wrapper .ant-input:not(:last-child){
  padding-right: 11px;
}
</style>